<template>
  <Header :title="address"></Header>
  <van-address-edit
  :area-list="areaList"
  :address-info="addressInfo"
  show-delete
  show-set-default
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
/>
</template>

<script>
import Header from '../../components/Header.vue'
import {reactive,toRefs,onMounted,computed} from 'vue'
import { useRoute ,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {Toast} from 'vant'
export default {
  components:{
    Header,
  },
  setup(){
    const route=new useRoute();
    const router=new useRouter();
    const store=new useStore();
    let data= reactive({
      areaList: {
        province_list: {
          110000: "广东省",
          120000: "浙江省",
        },
        city_list: {
          110100: "广州市",
          110200: "深圳市",
          120100: "杭州市",
          120200: "宁波市",
        },
        county_list: {
          110101: "天河区",
          110102: "海珠区",
          120102: "上城区",
          130102: "下城区",
        },
      },
      addressInfo:{},
    })
    
    const address=computed(()=>{
      return route.query.type==='add'?'地址新增':'地址编辑';
    })
    // 初始化数据
    const init=()=>{
      store.state.userAddress.forEach((item)=>{
        if(item.id===Number(route.query.id)){
          data.addressInfo=item
        }
      })
    }
    onMounted(()=>{
      init()
    })
    // 保存按钮
    const onSave=(content) => {
      // 判断时编辑地址的保存还是新增地址的保存
      if(route.query.type==='add'){
        store.commit('ADDADDRESS',content)
      }else{
        store.commit('CHANGEADDRESS',content)
      }
      Toast('保存成功!')
      setTimeout(()=>{
        router.back()
      },1000)
    }
    // 删除按钮
     const onDelete=(content) => {
      store.commit('DELETEADDRESS',content)
      Toast('删除成功!')
      setTimeout(()=>{
        router.back()
      },1000)
    }

    return {
      ...toRefs(data),onSave,onDelete,address,
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
</style>